
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生之家</title>
  </head>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      background-image: linear-gradient(180deg, #ff3c2a, #ff9f28);
      position: relative;
      overflow: hidden;
    }

    img {
      width: 60px;
    }

    .container {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      bottom: 150px;
    }

    div {
      color: #ffffff;
      font-family: PingFang SC, PingFang SC-Bold;
    }

    button {
      width: calc(100% - 40px);
      height: 45px;
      margin: 10px 20px;
      border: none;
      outline: none;
      color: #ff9f28;
      background-color: #fff;
      border-radius: 45px;
      line-height: 45px;
      font-size: 18px;
    }

    .container div:nth-child(2) {
      font-weight: bold;
      font-size: 30px;
    }

    .container div:nth-child(3) {
      font-size: 14px;
      margin: 20px 0 80px 0;
    }

    /* 微信浏览器 添加右上角封面 */
    .cover {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      display: none;
    }
    .cover .cover-content {
      width: 100%;
      height: 70px;
      background-color: #eeeeee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
      box-sizing: border-box;
    }
    .cover-content div {
      color: #5f5d5d;
      font-size: 14px;
    }
    .cover-content .cover-img img {
      width: 40px;
      height: 40px;
    }
    .logo {
      width: 150px;
      transform: scale(2);
    }
  </style>

  <body>
    <!-- 主题 -->
    <div class="container">
      <div class="img-box">
        <img src="stufamily-logo.png" alt="logo" />
      </div>
      <div>学生之家</div>
      <div>“电商平台”</div>
      <button onclick="downloadAndroid()">Android版下载</button>
      <button onclick="downloadIOS()">iOS版下载</button>
    </div>
    <!-- 模态框 -->
    <div class="cover" >
      <div class="cover-content">
        <div class="cover-text">
          <div>请点击右上角按钮</div>
          <div>选择“在浏览器打开”来下载</div>
        </div>
        <div class="cover-img">
          <img
            src=""
            alt="error"
          />
        </div>
      </div>
    </div>
    <script>
      /* 获取终端属性 */
      var browser = {
        versions: (function () {
          var u = navigator.userAgent,
            app = navigator.appVersion;
          return {
            trident: u.indexOf("Trident") > -1, //IE内核
            presto: u.indexOf("Presto") > -1, //opera内核
            webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
            gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
            mobile:
              !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或者uc浏览器
            iPhone: u.indexOf("iPhone") > -1 || u.indexOf("Mac") > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf("iPad") > -1, //是否iPad
            webApp: u.indexOf("Safari") == -1, //是否web应该程序，没有头部与底部
            weixin: u.match(/(MicroMessenger)/i), // 是否微信内打开
          };
        })(),
      };
      var cover = document.querySelector(".cover");
      isWeixin();
      /* 点开之后默认下载 */
      if (browser.versions.ios) {
        window.open(
          "https://apps.apple.com/cn/app/lili%E7%94%B5%E5%95%86/id1564638363",
          "_blank"
        );
      }
      function downloadAndroid() {
        isWeixin();
        window.open("./lilishop.apk", "_blank");
      }

      function downloadIOS() {
        isWeixin();
        window.open(
          "https://apps.apple.com/cn/app/lili%E7%94%B5%E5%95%86/id1564638363",
          "_blank"
        );
      }

      function isWeixin() {
        if (browser.versions.weixin) {
          cover.style.display = "block";
          return;
        }
      }

      function showOrHide() {
        cover.style.display = "none";
      }
    </script>
  </body>
</html>
